<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 客户端状态</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="fa fa-refresh" class="handle-del mr10" @click="getData">刷新</el-button>

        <el-input v-model="select_word" placeholder="筛选关键词" style="width:240px"></el-input>
        <el-button type="primary" icon="search" @click="search">搜索</el-button>

      </div>
      <el-table :data="tableData"
                style="width: 100%"
                ref="multipleTable"
                border
                stripe
                fit>
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column prop="clientId" label="客户端编号" sortable width="150">
        </el-table-column>
        <el-table-column prop="groupName" label="分组" sortable width="80">
        </el-table-column>
        <el-table-column prop="sessionId" label="会话ID" width="160">
        </el-table-column>
        <el-table-column prop="clientName" label="客户端名称" width="120">
        </el-table-column>
        <el-table-column prop="connected" label="是否连接" width="50" :formatter="IsConnectFmt">
          <!--<template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.groupName }}</span>
        </template>-->
        </el-table-column>
        <el-table-column prop="startTime" label="接入时间" width="200" :formatter="dateFmt">
        </el-table-column>
        <el-table-column prop="lastActiveTime" label="上次连接时间" width="200" :formatter="dateFmt">
        </el-table-column>
        <el-table-column prop="remoteIP" label="客户端IP" width="160">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--<el-button type="primary" @click="handleEdit(scope)">编辑</el-button>-->
            <el-dropdown split-button type="primary" @click="handleEdit(scope)" @command="handleCommand">
              编辑
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{cmd:0,data:scope.row}" :disabled="!scope.row.connected">查看</el-dropdown-item>
                <el-dropdown-item :command="{cmd:1,data:scope.row}">连接</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange"
                       layout="prev, pager, next"
                       :total="totalPage"
                       :page-size="20">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="150px">
        <input type="hidden" name="clientId" :value="form.clientId" />
        <el-form-item label="分组">
          <el-select v-model="form.groupId" placeholder="请选择">
            <el-option v-for="item in clientGroupOps"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户端名称">
          <el-input v-model="form.clientName" placeholder="请输入客户端名称"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入备注内容"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

   
  </div>
</template>
<script>
  export default {
    data() {
      return {
        apiBaseUrl: "/api",
        tableData: [],
        curPage: 1,
        totalPage: 1,
        multipleSelection: [],
        select_cate: '',
        select_word: '',
        is_search: false,
        editVisible: false,
        delVisible: false,
        viewVisible:false,
        form: {
          clientId: "",
          clientName: "",
          groupId: "",
          groupName: "",
          remark: ""
        },
        idx: -1,
        clientGroupOps: []
      }
    },
    methods: {
      // 分页导航
      handleCurrentChange(val) {
        this.curPage = val;
        this.getData();
      },
      getData() {
        var clientDataUrl = this.apiBaseUrl + "/ClientStatus"
        this.$axios.get(clientDataUrl, {
          params: {
            pageNo: this.curPage,
            pageSize: 20
          }
        }).then((res) => {
          var body = res.data;
          if (body.resultCode == 0) {
            this.tableData = body.data.pageData;
            this.totalPage = body.data.total;

          } else {
            this.tableData = [];
            this.totalPage = 0;
          }
        });
        var clientGroupsUrl = this.apiBaseUrl + "/ClientGroups"
        this.$axios.get(clientGroupsUrl, {
          params: {
            all:false
          }
        })
          .then((res) => {
            var body = res.data;
            if (body && body.resultCode == 0) {
              this.clientGroupOps = body.data.pageData;
            } else {
              this.clientGroupOps = [];
            }
          })
      },
      search() {
        this.is_search = true;
      },
      handleEdit(scope) {
        let item = scope.row;
        if (item) {
          var grpIdx = this.clientGroupOps.findIndex((val, i, arr) => {
            return val.name == item.groupName
          })
          console.log("grpIdx=" + grpIdx);
          this.form = {
            clientId: item.clientId,
            clientName: item.clientName,
            groupId: this.clientGroupOps[grpIdx].id || 0,
            groupName: item.groupName,
            remarks: item.remarks
          };
        }
        this.editVisible = true;
      },
      handleCommand(param) {
        this.$message('click on item ' + param.cmd);
        //console.log(param);
        let url = this.apiBaseUrl + "/WebSiteInfo/query?id=" + param.data.sessionId;
        
        //查看
        if (param.cmd == 0) {
          this.$axios.get(url)
            .then((res) => {
              var body = res.data;
              //console.log(res);
              if (body && body.resultCode == 0) {
                this.$router.push({ name: "webSiteInfos", params: { requestId:body.data } });
              }
            })
        }
        //连接
        if (param.cmd == 1) {

        }
        /*
        if (cmd == 0) {
          this.$router.push({name: 'table', params: { userId: 123 }});
        } else {
          this.$router.push('tabs');
        }
        */
      },
      dateFmt(row, column, cellValue, index) {
        return new Date(cellValue).toLocaleString();
      },
      IsConnectFmt(row, col, val, idx) {
        if (val) {
          return "是";
        } else {
          return "否";
        }
      },
      saveEdit() {
        let i = this.tableData.findIndex((val, i, arr) => {
          return val.clientId == this.form.clientId;
        });
        this.idx = i;
        let apiUrl = this.apiBaseUrl + "/ClientStatus"
        if (i > -1) {
          let tmp = this.tableData[i];
          tmp.clientName = this.form.clientName;
          tmp.remarks = this.form.remarks;
          
          this.$axios.put(apiUrl + "/" + this.form.clientId, {
            clientName: this.form.clientName,
            remarks: this.form.remarks,
            groupId: this.form.groupId
          }).then((res) => {
            var body = res.data;
            if (body.resultCode == 0) {
              tmp.groupId = body.data.id;
              tmp.groupName = body.data.name;
              this.$set(this.tableData, i, tmp);
              this.$message.success("修改成功");
            } else {
              this.$message.error("修改失败,错误:" + body.resultMsg);
            }
          });

        } else {
          this.$message.error("数据未找到，请刷新后重试");
        }
        this.editVisible = false;

      }
    },
    created() {
      this.getData();
    },
    computed: {

    }

  }
</script>
<style scoped>


</style>
